<!--
 * @author: 十一
 * @since: 2024-08-27
 * Drawer.vue
 * @desc: new page
-->
<template>
  <a-drawer
    v-model:open="open"
    :destroyOnClose="true"
    width="500"
    class="custom-class"
    root-class-name="root-class-name"
    :title="props.drawerOptions.title"
    placement="right"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item ref="title" label="站点名称" name="title">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.title }}
        </div>
        <a-input
          v-model:value="formState.title"
          placeholder="请输入站点名称"
          v-else
        />
      </a-form-item>

      <!-- <a-form-item ref="type" label="站点分类" name="type">
        <div v-if="props.drawerOptions.state == 2">
          {{ formatDictionaryItem("AD_TYPE", formState.type) }}
        </div>
        <a-select
          v-model:value="formState.type"
          placeholder="请选择广告类型"
          v-else
        >
          <a-select-option
            :value="item.code"
            v-for="item in AD_TYPE"
            :key="item.id"
            >{{ item.title }}</a-select-option
          >
        </a-select>
      </a-form-item> -->
      <a-form-item ref="type" label="是否收录" name="type">
        <div v-if="props.drawerOptions.state == 2">
          {{ formatDictionaryItem("AD_STATUS", formState.type) }}
        </div>
        <a-select
          v-model:value="formState.type"
          placeholder="请选择是否收录"
          v-else
        >
          <a-select-option
            :value="item.code"
            v-for="item in INCLUSION"
            :key="item.id"
            >{{ item.title }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item ref="link" label="站点地址" name="link">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.link }}
        </div>
        <a-input
          v-model:value="formState.link"
          placeholder="请输入站点地址"
          v-else
        />
      </a-form-item>
      <a-form-item ref="description" label="站点描述" name="description">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.description }}
        </div>
        <a-input
          v-model:value="formState.description"
          placeholder="请输入站点描述"
          v-else
        />
      </a-form-item>
      <a-form-item ref="phone_number" label="手机号" name="phone_number">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.phone_number }}
        </div>
        <a-input
          v-model:value="formState.phone_number"
          placeholder="请输入提交人手机号"
          v-else
        />
      </a-form-item>
      <a-form-item ref="email" label="邮箱" name="email">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.email }}
        </div>
        <a-input
          v-model:value="formState.email"
          placeholder="请输入提交人邮箱"
          v-else
        />
      </a-form-item>
      <a-form-item ref="nickname" label="昵称" name="nickname">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.nickname }}
        </div>
        <a-input
          v-model:value="formState.nickname"
          placeholder="请输入提交人昵称"
          v-else
        />
      </a-form-item>
      <a-form-item
        :wrapper-col="{ span: 20, offset: 4 }"
        v-if="props.drawerOptions.state != 2"
      >
        <a-button type="primary" @click="onSubmit">提交</a-button>
        <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script lang="ts" setup>
import UploadFile from "@/components/UploadFile/index.vue";
import { ref, watch } from "vue";
import { reactive, toRaw } from "vue";
import type { UnwrapRef } from "vue";
import type { Rule } from "ant-design-vue/es/form";
import { DataEcho } from "@/utils/dataEcho";
import { editSiteInclusionApi, addSiteInclusionApi } from "@/api/main";
import { message } from "ant-design-vue";
import { formatDictionaryList, formatDictionaryItem } from "@/utils/common";
import usePublicConfigStore from "@/stores/modules/public-config";
const publicConfigStore = usePublicConfigStore();
import emitter from "@/utils/mitt";
const open = ref<boolean>(false);
const formRef = ref();
interface FormState {
  id: string;
  user_id: string;
  classify_id: string ;
  title: string;
  link: string;
  description: string ;
  phone_number: string;
  email: string;
  nickname: string;
  type: string |number;
}

const labelCol = { span: 4 };
const wrapperCol = { span: 20 };
const formState: UnwrapRef<FormState> = reactive({
  id: "",
  user_id: "",
  classify_id: "",
  title: "",
  link: "",
  description: "",
  phone_number: "",
  email: "",
  nickname: "",
  type: 0,
});
const INCLUSION = formatDictionaryList(publicConfigStore.dictionary, 'INCLUSION')
const AD_POSITION = formatDictionaryList(
  publicConfigStore.dictionary,
  "AD_POSITION"
);
const AD_STATUS = formatDictionaryList(
  publicConfigStore.dictionary,
  "AD_STATUS"
);
const rules: Record<string, Rule[]> = {
  //   username: [
  //     {
  //       required: true,
  //       message: "Please input Activity name",
  //       trigger: "change",
  //     },
  //     { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  //   ],
};

// 接收父组件的参数
const props = defineProps(["drawerOptions"]);
watch(
  () => open.value,
  (newVal) => {
    DataEcho(formState, props.drawerOptions.options);
  },
  {
    immediate: true,
  }
);
const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      const requsetParams = toRaw(formState);
      if (props.drawerOptions.state == 0) {
        addSiteInclusionApi(requsetParams).then((response: any) => {
          console.log(response);
          if (response.code == 200) {
            message.success("添加成功");
            emitter.emit("handleSuccess");
            open.value = false;
          } else {
            message.error(response.msg);
          }
        });
      } else {
        editSiteInclusionApi(requsetParams).then((response: any) => {
          console.log(response);
          if (response.code == 200) {
            message.success("修改成功");
            emitter.emit("handleSuccess");
            open.value = false;
          } else {
            message.error(response.msg);
          }
        });
      }
    })
    .catch((error: any) => {
      console.log("error", error);
    });
};

const resetForm = () => {
  console.log(formRef.value);
  formRef.value.resetFields();
};
//暴露给父组件
defineExpose({ open });
</script>

<style scoped></style>
